import {Button, Col, Row} from "antd";
import {ModalForm, ProFormSelect, ProFormText} from "@ant-design/pro-components";
import {PlusOutlined} from "@ant-design/icons";
import React from "react";

interface IRoleEdit {
  isAdd: boolean;
  role?: API.IRole;
  triggerButton?: React.ReactElement;
  onSubmit: (values: API.IRole) => Promise<boolean>;
}

const RoleEditModel: React.FC<IRoleEdit> = ({isAdd, tooltip, title, role, triggerButton, onSubmit}) => {

  return (
    <ModalForm
      title={isAdd ? '新增角色' : '编辑角色'}
      initialValues={role}
      onFinish={async (values: API.IRole) => {
        await onSubmit?.(values);
        return true;
      }}
      autoFocusFirstInput
      trigger={triggerButton || <Button type="primary" icon={<PlusOutlined/>}> 新增角色</Button>}
      modalProps={{destroyOnClose: true}}
    >
      <Row gutter={20}>
        <Col span={12}>
          <ProFormText
            name="name" label="名称" placeholder="请输入角色名称"
            rules={[{required: true, message: '请输入角色名称'}]}/>
        </Col>
        <Col span={12}>
          <ProFormText
            name="roleKey" label="权限字符串" placeholder="请输入权限字符串"
            rules={[{required: true, message: '请输入权限字符串'}]}
          />
        </Col>
      </Row>
      <Row gutter={20}>
        <Col span={12}>
          <ProFormSelect
            name="roleSort" label="排列顺序"
            valueEnum={{"1": "1", "2": "2", "3": "3", "4": "4"}}
            rules={[{required: true, message: '请选择排列顺序'}]}
          />
        </Col>
        <Col span={12}>
          <ProFormSelect
            name="status" label="状态"
            valueEnum={{
              "0": {text: '正常', status: 'Success'},
              "1": {text: '停用', status: 'Error'},
            }}
            rules={[{required: true, message: '请选择状态'}]}
          />
        </Col>
      </Row>
    </ModalForm>
  );
};

export default RoleEditModel;
